<template>
  <div>
    <el-table
      highlight-current-row
      row-key="id"
      @row-click="rowChoosed"
      stripe
      :data="tableData"
      border
      :cell-style="cellStyle"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) in tableHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"

      ></el-table-column>
      <el-table-column :width="currentWidth" v-if="editable" label="操作">
        <template slot-scope="scope">

          <el-button type="primary" size="mini"  icon="el-icon-edit" @click="edit(scope.row,1)" ></el-button>

          <el-button type="danger" size="mini"  icon="el-icon-delete" @click="edit(scope.row,0)" ></el-button>

          <el-button type="primary"  v-if="scope.row.type==0&&$route.path.includes('region')" @click="edit(scope.row,2)" size="mini">新增建筑</el-button>
          <el-button type="primary"  v-if="scope.row.type==1&&$route.path.includes('region')" plain @click="edit(scope.row,2)" size="mini">新增楼层</el-button>

        </template>
      </el-table-column>
    </el-table>
      <el-pagination
              @size-change="sizeChange"
              @current-change="pageChange"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="sizes, prev, pager, next"
              :page-count="totalPage">
      </el-pagination>
    </div>
</template>

<script>
export default {
  name: "",
  props: {
    addType:{
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
        default:function(){
            return []
        }
    },
    editable: {
      type: Boolean,
      default: false
    },
    tableHeader: {
      type: Array,
      default: []
    },
    totalPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentWidth:{
      type:String,
      default:"150"
    },
    pageSizes:{
      type:Array,
      default:()=>[10]
    }
  },

  data() {
    return {};
  },

  methods: {
      cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
          if(row.column.label==="处理情况"&& row.row.remark==="未处理"){
              return 'color:red;font-size: 18px;'
          }
      },
    handleClick(row) {
      console.log(row);
    },
    edit(i, flag) {
      const editDel = {
        DEl: 0,
        EDIT: 1,
        ADD: 2,
      };
      if (flag == editDel.DEl) {
        this.$emit("receiveDel", i);
      }
      if (flag == editDel.EDIT) {
        this.$emit("receiveEdit", i);
      }
      if (flag == editDel.ADD) {
        this.$emit("receiveAdd", i);
      }
    },
    rowChoosed(data) {
      this.$emit("rowChecked", data);
    },
    pageChange(d) {
      this.$emit("currentPage",d)
    },
    sizeChange(d){
      this.$emit("sizeChange",d)
    }
  }
};
</script>

<style lang='less' scoped>
.el-pagination {
  float: right;
  padding: 30px 100px 0 0;
}
</style>
